<template>
	<view>
		<view class="comment-top  margin-bottom-sm flex justify-between" v-if="comments.length>0">
			<text class="comment-top-list text-bold ">评论列表</text>
			<text class="text-xs text-gray">有{{comments.length}}条评论</text>
		</view>
		<view class="comment">
			<review :reviewMsg="comments" @reply="reply"></review>
			<u-gap height="80"></u-gap>
			<view class="comment-input flex align-center">
				<view class="uinput ">
					<textarea maxlength="-1" auto-height="true"  cursor-spacing="20px"
					:placeholder="comment.receiverName ? '回复 @' + comment.receiverName + '： ' : '评论...'"
					v-model="comment.content" style="height: 60rpx;max-height: 215rpx;padding: 0px;width: 100%;"
					 :adjust-position="true" :show-confirm-bar="fasle"
					></textarea>
				</view>
				<view class="comment-btn">
					<text v-if="vuex_token" class="  text-lg" @click="pushComment">发布</text>
					<button v-else class="  text-lg oauth-btn "  open-type="getUserInfo" @getuserinfo="wxLogin" withCredentials="true">登录</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import review from '@/components/uni/dl-review/review.vue';
export default {
	components: {
		review
	},
	props:{
		articleId:'',
	},
	data() {
		return {
			// 评论列表
			comments: [],
			comment: {
				articleId: '',
				receiver: '',
				receiverAvatar: '',
				receiverName: '',
				content: ''
			}
		};
	},
	watch:{
		articleId(val){
			if(val){
				this.comment.articleId = val;
				this.listTreeArticleComment( val);
			}
		}
	},
	methods: {
		listTreeArticleComment(id) {
			this.$u.api.listTreeArticleComment(id).then(res => {
				this.comments = res.data;
			});
		},
		reply(item) {
			/* uni.pageScrollTo({
				scrollTop: 99999999999
			}); */
			this.comment.receiver = item.sender;
			this.comment.receiverAvatar = item.senderAvatar;
			this.comment.receiverName = item.senderName;
			this.comment.pid = item.id;
		},
		pushComment() {
			if(!this.comment.content){
				uni.showToast({ icon: 'none',duration: 2000, title: '请输入评论内容'});
				return;
			}
			this.$u.api.add(this.comment).then(res => {
				uni.showToast({ icon: 'none', duration: 2000,title: '评论提交成功，管理员审核中'});
				//this.listTreeArticleComment(this.comment.articleId);
				this.comment.content=''
			});
		},
		wxLogin(response){
			if (!response.detail.iv) {
				uni.showToast({
					title: "您取消了授权,登录失败",
					icon: "none",
					duration: 2000
				});
				return false;
			}
			let _this = this;
			uni.showLoading({
				title:'登录中...'
			})
			uni.login({
			    provider: 'weixin',
			    success: function (loginRes) {
					//从服务器上获取AppId screat //根据code 去微信服务器获取 openid
					_this.$u.api.getWechatOpenId({code:loginRes.code}).then(res=>{
						if(!res.data){
							uni.showToast({ icon: 'none',position: 'bottom',title: '登录失败',duration: 2000});
							return;
						}
						let userInfo = response.detail.userInfo;
						let authUser = {
							uuid:res.data.openid,
							username:userInfo.nickName,
							nickname:userInfo.nickName,
							avatar:userInfo.avatarUrl,
							source:'wechat'
						}
						_this.$u.api.wechatLogin(authUser).then(res=>{
							let user = res.data.userInfo;
							_this.$u.vuex('vuex_user.username', user.userName);
							_this.$u.vuex('vuex_user.avatar', user.avatar);
							_this.$u.vuex('vuex_token', res.data.token);
						})
						uni.hideLoading()
					})
			    },
				fail:function () {
					uni.hideLoading()
					uni.showToast({ icon: 'none',position: 'bottom',title: '登录失败',duration: 2000});
				}
			});
		},
	}
};
</script>
<style lang="stylus" scoped>
page
	background #FFFFFF
.comment-top
	.comment-top-list
		padding-bottom 8rpx
		border-bottom 4rpx solid #535353 
.comment
	.comment-input
		position fixed
		bottom 0
		left 0
		width 100%
		background #fcfcfc
		padding 15rpx
		display flex
		border-top 1rpx solid #efefef 
		box-shadow: 0 0 0 2rpx rgba(248, 248, 248, 0.0), 0 8rpx 20rpx rgba(0,0,0,.06);
		.uinput 
			background #ececec
			flex 5
			border-radius 10rpx 0  0 10rpx 
			min-height 60rpx
			color #3e3c3c
			padding 10rpx 20rpx
			box-shadow: 0 0 0 2rpx rgba(0,0,0,.02), 0 8rpx 20rpx rgba(0,0,0,.06);
			font-size 36rpx
		.comment-btn
			flex 1
			display flex
			justify-content center
			background #ffa10a
			color #fff
			padding 10rpx 0
			border-radius 0 10rpx  10rpx 0
			margin-left 10rpx
			box-shadow: 0 0 0 2rpx rgba(0,0,0,.02), 0 8rpx 20rpx rgba(0,0,0,.06);
			.oauth-btn
				display inline
				background #ffa10a
				color #fff
				padding:5rpx 0px;
				line-height 1
			button::after
				border 0
	
</style>
